/**
 * This function is being called by the Mesh component when starting animation
 * via componentReference.startAni() or when prop 'aniauto' is provided (true)
 */
import anime from 'animejs';
export const rotateCube = (obj) => {
	let rAF = 0;
	let doRotate = false;

	function onStart() {
		startRotating();
	}

	function startRotating() {
		doRotate = true;
		rAF = requestAnimationFrame(rotate);
	}

	function rotate() {
		if (doRotate) {
			// let animetime = anime.timeline({
			//   easing: "easeOutElastic(1.5,.3)",
			//   duration: 600,
			//   direction: "alternate",
			//   loop: true,
			// })
			// animetime
			//   // .add({
			//   //   targets: obj.material,
			//   //   opacity: 1,
			//   // })
			//   .add(
			//     {
			//       targets: obj.rotation,
			//       change: function () {
			//         obj.rotation.y += 0.1
			//         // obj.rotation.z += 0.1
			//         // obj.rotation.x += 0.1
			//       },
			//     },
			//     0
			//   )
			//   .add({
			//     targets: obj.scale,
			//     x: 1.5,
			//     y: 1.5,
			//     z: 1.2,
			//   })

			//   .add(
			//     {
			//       targets: obj.material.color,
			//       b: 0.33,
			//       g: 1,
			//       r: 0.33,
			//     },
			//     0
			//   )
			//   .add(
			//     {
			//       targets: obj.position,
			//       z: 1,
			//       y: 2,
			//     },
			//     "-=600"
			//   )
			//   .add(
			//     {
			//       targets: obj.position,
			//       x: -1,
			//       y: -0.5,
			//     },
			//     600
			//   )
			//   .add(
			//     {
			//       targets: obj.material,
			//       opacity: 0.2,
			//     },
			//     "-=600"
			//   )
			obj.rotation.y -= 0.01;
			obj.rotation.z -= 0.01;
			rAF = requestAnimationFrame(rotate);
		}
	}

	function onDestroy() {
		doRotate = false;
		cancelAnimationFrame(rAF);
	}

	return {
		onStart: onStart,
		onDestroy: onDestroy
	};
};
